<template>
  <a-menu
      theme="dark"
      mode='inline'
      :openKeys="openKeys"
      @openChange="menuOpenChange"
      :selectedKeys="selectedKeys"
      @click="menuChange"
  >
    <template v-for="menu in menuList">
      <a-sub-menu v-if="menu.children && menu.children.length > 0" :key="menu.path" :dataKey="menu.id"
                  :title="menu.title">
        <slide-bar-item :menu-list="menu.children" :menu-click="menuClick"/>
      </a-sub-menu>
      <a-menu-item v-else :key="menu.path" :dataKey="menu.id">
        {{ menu.title }}
      </a-menu-item>
    </template>
  </a-menu>
</template>

<script>

export default {
  name: "SlideBarItem",
  props: {
    openKeys: {
      type: Array,
      default: () => ([])
    },
    selectedKeys: {
      type: Array,
      default: () => ([])
    },
    menuList: {
      type: Array,
      default: () => ([])
    },
    menuClick: {
      type: Function,
      default: () => undefined
    },
    menuOpenChange: {
      type: Function,
      default: () => undefined
    }
  },
  methods: {
    menuChange(selected) {
      this.menuClick(selected);
    }
  }
}
</script>

<style scoped>

</style>
